<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meat name="viewpoet" content="with=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 200px;
                text-align: center;
                border-radius: 5px;
                box-shadow: 2px 2px 2px #ccc;
                border: 1px solid #2d2a2a;
                /* border-style: solid; */
            }
        </style>
</head>

<body>
    <div id="app">
        <button @click="fn(1,2)">按钮</button>
    </div>

    <div id="drink">
        <div class="box">
            <h3>小黑自动售货机</h3>
            <!-- <button @click="buyCoke">可乐{{coke}}元</button>
            <button @click="buyCoffee">咖啡{{coffee}}元</button> -->
            <button @click="buy(coke)">可乐{{coke}}元</button>
            <button @click="buy(coffee)">咖啡{{coffee}}元</button>
        </div>
        <p>银行卡余额：{{money}}元</p>
    </div>


    <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                fn(a, b) {
                    console.log(a + b)
                }
            }
        })

        const drink = new Vue({
            el: '#drink',
            data: {
                money: 100,
                coke: 5,
                coffee: 10
            },
            methods: {
                // buyCoke() {
                //     this.money -= this.coke
                // },
                // buyCoffee() {
                //     this.money -= this.coffee
                // },
                buy(price) {
                    this.money -= price
                }
            }
        })
    </script>

</body>

</html>